<template>
  <div class="content">
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="rank-content">
      <div class="average-legend" v-if="markLineShow">
        <span></span>
        平均值
      </div>
      <div :id="id" :data="data" v-if="show"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    chartTitle: {
      type: Object,
    },
    showLine: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    to: {
      type: String,
    },
    horizontal: {
      type: Boolean,
      default: false,
    },
    barWidth: {
      type: [Number, String],
      default: 10,
    },
    setKey: {
      type: Object,
    },
    showBarTop: {
      type: Boolean,
      default: false,
    },
    splitLabel: {
      type: Boolean,
      default: true,
    },
    labelMax: {
      type: Number,
      default: 5,
    },
    YsplitLine: {
      type: Boolean,
      default: false,
    },
    XsplitLine: {
      type: Boolean,
      default: false,
    },
    tab: {
      type: Boolean,
      default: false,
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      },
    },
    markLineShow: {
      type: Boolean,
      default: false,
    },
    markLineValue: {
      type: [Number, String],
    },
    YLabelSuffix: {
      type: String,
    },
    yName: {
      type: String,
    },
  },
  data() {
    return {
      id: '',
      btnActived: 1,
      show: true,
    }
  },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },

  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name)
    },
    _initBar() {
      let source = []
      let setKey = this.setKey
      if (setKey) {
        for (let i = 0; i < this.data.length; i++) {
          source.push({
            product: this.data[i][setKey.product],
            count: this.data[i][setKey.count],
          })
        }
      } else {
        source = this.data
      }
      let option = {
        title: this.chartTitle,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          left: '30px',
          right: this.horizontal && this.showBarTop ? '10%' : '50px',
          bottom: '5%',
          top: !this.horizontal && this.showBarTop ? '20%' : '10%',
          containLabel: true,
        },
        yAxis: [
          {
            type: 'value',
            name: this.yName,
            nameTextStyle: {
              color: '#333',
            },
            minInterval: 1,
            axisLabel: {
              color: '#000',
              fontSize: 14,
              formatter: (params) => {
                // 超出省略
                params = params.toString()
                var maxlength = this.labelMax
                // console.log(params)
                // console.log(typeof params)
                if (this.splitLabel) {
                  if (typeof Number(params) === 'number') {
                    let result = ''
                    result = params / 10000
                    if (params > 1000) {
                      return result + '万'
                    } else {
                      return params
                    }
                  } else {
                    if (params.length > maxlength) {
                      return params.substring(0, maxlength) + '...'
                    } else {
                      return params
                    }
                  }
                } else if (this.YLabelSuffix) {
                  return params + this.YLabelSuffix
                } else {
                  return params
                }
              },
            },
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9',
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ccc',
                type: 'dashed',
              },
            },
          },
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: true,
              alignWithLabel: true,
            },
            axisLabel: {
              formatter: (value) => {
                if (this.splitLabel) {
                  let result = ''
                  if (typeof value === 'number') {
                    result = value / 10000
                    if (value > 1000) {
                      return result + '万'
                    } else {
                      return value
                    }
                  } else {
                    var maxlength = this.labelMax
                    if (value.length > maxlength) {
                      return value.substring(0, maxlength) + '...'
                    } else {
                      return value
                    }
                  }
                } else {
                  return value
                }
              },
              color: '#000',
              fontSize: 14,
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9',
              },
            },
            splitLine: {
              show: this.XsplitLine,
              lineStyle: {
                color: ['#2A3968'],
              },
            },
          },
        ],

        series: [
          {
            // name: this.title.split('Top')[0],
            type: 'bar',
            barWidth: this.barWidth,
            markLine: {
              symbol: 'none',
              silent: false,
              data: [
                {
                  type: 'average',
                  //type: "min/max/average" // 特殊的标注类型，用于标注最大值最小值等。
                  lineStyle: {
                    // 线的样式
                    color: '#F2637B',
                    width: 1,
                    opacity: this.markLineShow ? 0.8 : 0,
                  },
                  label: {
                    // 文字的样式，默认是白色，有时候文字不显示，可能是颜色的问题
                    show: this.markLineShow,
                    formatter: (res) => {
                      let title = this.title
                      let value = ''
                      // let isPercent = title.indexOf('率') !== -1
                      let isPercent = ''
                      let propValue = this.markLineValue != undefined
                      //   console.log(this.markLineValue)
                      if (propValue) {
                        value = isPercent ? this.markLineValue + '%' : this.markLineValue + '分'
                      } else {
                        value = isPercent ? res.value + '%' : res.value + '分'
                      }
                      return value
                    },
                    color: '#fff',
                  },
                },
              ],
            },
            itemStyle: {
              normal: {
                label: {
                  show: this.showBarTop,
                  formatter: (value) => {
                    let str = ''
                    for (let key in value.value) {
                      if (key != 'product') {
                        str = key
                      }
                    }
                    let result = ''
                    result = this._formatNum(value.data[str])
                    return result
                  },
                  position: this.horizontal ? 'right' : 'top',
                  textStyle: {
                    color: '#fff',
                  },
                },
                // color: {
                //   x: 0,
                //   y: 0,
                //   x2: 0,
                //   y2: 1,
                //   colorStops: [
                //     {
                //       offset: 1, //颜色的开始位置
                //       color: 'rgba(0,152,150,.3)' // 0% 处的颜色
                //     },
                //     {
                //       offset: 0, //颜色的结束位置
                //       color: '#0DE8FB' // 100% 处的颜色
                //     }
                //   ]
                // }
                color: '#1F93FF',
              },
            },
          },
        ],
        dataset: {
          source: source,
        },
      }
      if (this.horizontal) {
        let x = option.yAxis
        let y = option.xAxis
        x[0].splitLine.show = false
        x[0].axisTick.show = true
        // y[0].splitLine.lineStyle.color = '#ccc'
        y[0].axisTick.show = false
        option.xAxis = x
        option.yAxis = y
        option.series[0].itemStyle.normal.color = {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1, //颜色的开始位置
              color: 'rgba(0,152,150,.3)', // 0% 处的颜色
            },
            {
              offset: 0, //颜色的结束位置
              color: '#0DE8FB', // 100% 处的颜色
            },
          ],
        }
      }

      if (this.showLine) {
        option.series.push({
          // name: this.title.split('Top')[0],
          symbol: 'circle',
          symbolSize: 8,
          type: 'line',
        })
      }
      let documentChart = document.getElementById(this.id)
      if (documentChart) {
        this.chart = this.$echarts.init(documentChart)
        this.chart.setOption(option)
      }
      window.addEventListener('resize', () => {
        this.chart.resize()
        this.show = false
        setTimeout(() => {
          this.show = true
        }, 300)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  // background-color: #009896;

  .rank-content {
    flex: 1;
    position: relative;
    margin-top: 0.926vh;

    .average-legend {
      width: auto;
      height: auto;
      position: absolute;
      display: flex;
      align-items: center;
      right: 0;
      top: 0;
      color: #fff;
      font-size: 1.3vh;
      display: flex;

      span {
        display: inline-block;
        width: 0.926vh;
        height: 0.926vh;
        background-color: #f2637b;
        margin-right: 0.926vh;
      }
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }

  .group {
    display: flex;
    padding: 10px;

    div {
      min-width: 9.722vh;
      padding: 0 10px;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 20px;
    }

    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #000;
      font-weight: bold;
    }
  }
}
</style>
